<template>
  <div class="filter-bar">
    <el-button-group>
      <el-button :type="modelValue==='all'?'primary':'default'" @click="$emit('update:modelValue','all')">
        <el-icon><List /></el-icon> 全部
      </el-button>
      <el-button :type="modelValue==='active'?'primary':'default'" @click="$emit('update:modelValue','active')">
        <el-icon><CircleCheck /></el-icon> 未完成
      </el-button>
      <el-button :type="modelValue==='completed'?'primary':'default'" @click="$emit('update:modelValue','completed')">
        <el-icon><Finished /></el-icon> 已完成
      </el-button>
    </el-button-group>
  </div>
</template>

<script setup>
import { List, CircleCheck, Finished } from '@element-plus/icons-vue'
const props = defineProps({
  modelValue: String
})
</script>

<style scoped>
.filter-bar {
  display: flex;
  justify-content: center;
  margin: 0 0 8px 0;
}
.el-button-group .el-button {
  font-weight: 500;
  letter-spacing: 1px;
  border-radius: 8px !important;
  transition: background var(--transition), color var(--transition);
}
</style> 